<template>
  <div class="mainWrapper">
    <div class="searchBox">
      所属类别：
      <el-radio-group v-model="displayCategory" class="radioGroup" @change="handleChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button v-for="item in categoryList" :key="item" :label="item">
          {{ item }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div v-loading="loading" class="resultArea">
      <div v-for="item in chipData.data" :key="item.chipId" class="box-card">
        <div class="header">
          <el-tooltip
            :disabled="getStrLength(item.displayName + (chipType === 1 ? '工程' : '驱动-' + item.compatible)) < 31"
            effect="dark"
            :content="item.displayName + (chipType === 1 ? '工程' : '驱动-' + item.compatible)"
            placement="top"
          >
            <span class="title ellipsis">
              {{ item.displayName + (chipType === 1 ? '工程' : '驱动-' + item.compatible) }}
            </span>
          </el-tooltip>
        </div>
        <div class="content">
          <el-tooltip
            :disabled="getStrLength(item.model ?? '') < 30"
            effect="dark"
            :content="item.model"
            placement="top"
          >
            <div class="text ellipsis">芯片型号：{{ item.model }}</div>
          </el-tooltip>
          <el-tooltip
            :disabled="getStrLength(item.displayCategory) < 30"
            effect="dark"
            :content="item.displayCategory"
            placement="top"
          >
            <div class="text ellipsis">芯片类别：{{ item.displayCategory }}</div>
          </el-tooltip>
          <el-tooltip
            :disabled="getStrLength(item.manufacturer) < 30"
            effect="dark"
            :content="item.manufacturer"
            placement="top"
          >
            <div class="text ellipsis">芯片厂家：{{ item.manufacturer }}</div>
          </el-tooltip>
          <el-tooltip
            :disabled="getStrLength(item.compatible ?? '') < 30"
            effect="dark"
            :content="item.compatible"
            placement="top"
          >
            <div class="text ellipsis">适配{{ chipType === 1 ? '标识' : '范围' }}：{{ item.compatible }}</div>
          </el-tooltip>
        </div>

        <div class="btnBox">
          <el-link
            v-permission="['driverLibraryManagement:driverLibrary:manage']"
            type="primary"
            :underline="false"
            @click="handleClick('open', item)"
          >
            管理{{ chipType === 1 ? '工程' : '驱动' }}文件
          </el-link>
          <span v-permission="['driverLibraryManagement:driverLibrary:del']">
            <el-divider direction="vertical"></el-divider>
          </span>
          <el-popconfirm
            v-permission="['driverLibraryManagement:driverLibrary:del']"
            title="确定删除吗？"
            @confirm="handleClick('del', item)"
          >
            <el-link slot="reference" type="primary" :underline="false">删除</el-link>
          </el-popconfirm>
        </div>
      </div>
      <el-empty
        v-if="chipData.data.length === 0 && !loading"
        class="emptyBox"
        :image="require('@/assets/imgs/empty.png')"
      ></el-empty>
      <!-- <chipDetail ref="chipDetail" :category-list="categoryList" @refresh="handleRefreshParent" /> -->
      <!-- <updateChip ref="updateChip" @refresh="handleRefreshParent" /> -->
    </div>
    <pagination
      class="myPagination"
      :table-total-size="chipData.tableTotalSize"
      :search-data="searchData"
      @getTableData="handleSearch"
    />
  </div>
</template>

<script>
import pagination from '@/components/Table/pagination'
import { getStrLength } from '@/utils/index'
// import chipDetail from './chipDetail.vue'
// import updateChip from './updateChip.vue'
import { getDriverLibraryData, deleteDriverLibrary } from '@/api/project-management'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'

export default {
  components: { pagination },
  props: {
    chipType: {
      type: Number,
      default: 1
    },
    categoryList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      displayCategory: 'all',
      searchData: {
        pageSize: 15,
        currentPage: 1,
        sort: {},
        params: {
          displayCategory: undefined
        }
      },
      chipData: {
        data: [],
        tableTotalSize: 0
      },
      getDriverLibraryDataRequestId: generateUUID(),
      deleteDriverLibraryRequestId: generateUUID(),
      currentRow: {}
    }
  },
  created() {
    this.searchData.params.type = this.chipType
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.getDriverLibraryDataRequestId) {
        self.chipData = {
          data: e.data.response.data.data ?? [],
          tableTotalSize: e.data.response.data.total_count ?? 0
        }
        self.loading = false
      } else if (e.data.webInfo.requestId === self.deleteDriverLibraryRequestId) {
        if (e.data.response.success) {
          self.handleRefreshParent(self.chipType)
          self.$message.success('删除成功')
        } else {
          self.$message.error(e.data.response.message)
        }
      }
    },
    getStrLength(str) {
      return getStrLength(str)
    },
    handleRefreshParent(chipType, displayCategory = '') {
      if (displayCategory !== this.displayCategory) {
        this.displayCategory = 'all'
        this.searchData.params.displayCategory = undefined
        this.searchData.currentPage = 1
      }
      this.$emit('refresh', chipType)
    },
    refreshData(name) {
      this.searchData.params.displayName = name
      this.searchData.params.model = name
      this.handleChange()
    },
    handleChange(val) {
      this.searchData.params.displayCategory = val === 'all' ? undefined : this.displayCategory
      this.searchData.currentPage = 1
      this.handleSearch()
    },
    handleSearch() {
      if (this.searchData.params.displayCategory === 'all') {
        this.searchData.params.displayCategory = undefined
      }
      this.loading = true
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.getDriverLibraryDataRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/driverLibrary/loadGrid',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: this.searchData,
          WebInfo: {
            requestId: this.getDriverLibraryDataRequestId
          }
        }
        postMessage(message)
      } else {
        getDriverLibraryData(this.searchData).then((res) => {
          this.chipData = {
            data: res.data.data ?? [],
            tableTotalSize: res.data.total_count ?? 0
          }
          this.loading = false
          this.$forceUpdate()
        })
      }
    },
    handleClick(name, row) {
      if (name === 'del') {
        this.currentRow = row
        if (defaultSettings.isWPF || defaultSettings.isCEF) {
          this.deleteDriverLibraryRequestId = generateUUID()
          let message = {
            RequestUrl: process.env.VUE_APP_URL + '/driverLibrary/delete',
            RequestMethod: 'POST',
            Headers: {
              contentType: 'application/json'
            },
            QueryParameter: {},
            RequestBody: { driverLibraryId: row.driverLibraryId },
            WebInfo: {
              requestId: this.deleteDriverLibraryRequestId
            }
          }
          postMessage(message)
        } else {
          deleteDriverLibrary({ driverLibraryId: row.driverLibraryId }).then((res) => {
            if (res.success) {
              this.handleRefreshParent(this.chipType)
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.message)
            }
          })
        }
      } else {
        this.$emit('handleClick', name, row)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/element-variables.scss';
.mainWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .searchBox {
    display: flex;
    line-height: 32px;
    .radioGroup {
      flex: 1;
      /deep/.el-radio-button {
        margin-right: 10px;
        margin-bottom: 10px;
        .el-radio-button__inner {
          border-left: 1px solid #dcdfe6;
          border-radius: 4px;
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          border-color: $--color-primary;
        }
      }
    }
  }
  .resultArea {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    .box-card {
      width: 320px;
      height: 216px;
      margin-right: 10px;
      margin-bottom: 10px;
      background: #fcfdff;
      border: 1px solid #dde4ec;
      align-self: baseline;
      position: relative;
      .header {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px dashed #dde4ec;
        padding: 13px 10px;
        margin: 0 10px;
        .title {
          width: 100%;
          display: block;
        }
      }
      .content {
        padding: 13px 20px;
      }
      .text {
        margin-bottom: 13px;
      }

      .btnBox {
        position: absolute;
        left: 0;
        bottom: 10px;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid #dde4ec;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
    }
    .el-empty {
      width: 100%;
    }
  }
  .myPagination {
    margin-top: 10px;
    /deep/.page {
      position: unset;
      margin-bottom: 0;
    }
  }
}
</style>
